<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="商品列表"
      left-arrow
      @click-left="$router.push('/layout/home')"
    >
      <!-- 这是左侧按钮点击显示不同的页面利用插槽 -->
      <template #right>
        <van-icon name="bars" size="18" @click="handleChange" v-if="!isShow" />
        <van-icon name="apps-o" size="18" @click="handleChange" v-else />
      </template>
    </van-nav-bar>

    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option" />
      <van-dropdown-item title="有货优先" />
      <van-dropdown-item title="直营优先" />
    </van-dropdown-menu>
    <!-- 商品列表 -->
    <GoodsListtree />
  </div>
</template>
<script>
import GoodsListtree from "@/components/GoodsListtree.vue";
export default {
  components: {
    GoodsListtree,
  },
  data() {
    return {
      // 商品列表显示
      isShow: true,
      value1: 0,
      option: [
        { text: "默认", value: 0 },
        { text: "价格由高到低", value: 1 },
        { text: "销量由高到低", value: 2 },
      ],
    };
  },
  methods: {
    // 右侧展示商品不同的列表
    // 改变商品列表
    handleChange() {
      console.log("处理");
      this.isShow = !this.isShow;
    },
  },
};
</script>
<style scoped lang="less">
.van-nav-bar {
  padding-top: 22px;
}
</style>
